<template>
    <div>
        <div class="amap-page-container map-zoom" :style="{height: mapHeight}">
            <el-amap :vid="'route' + randomNum" :zoom="zoom" :center="mapCenter" :style="{height: mapHeight}" class="amap-demo">
                <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" v-if="showSearch"></el-amap-search-box>
                <el-amap-marker
                        v-for="(marker,index) in dirverMarkers"
                        :key="index + 1"
                        :position="marker.position"
                        :events="marker.events"
                        :visible="marker.visible"
                        :draggable="marker.draggable">
                    <img src="./img/Group7@3x.png" v-if="marker.type === 'driver' " class="Driverimg">
                    <span v-if="marker.type === 'driver' " class="dirverName">{{marker.name}}</span>
                </el-amap-marker>
                <el-amap-polyline
                        v-for="(line,index) in polylines"
                        :key="index"
                        :path="line.path"
                        strokeStyle="dashed">
                </el-amap-polyline>

            </el-amap>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .amap-page-container {
        position: relative;
        .Driverimg {
            width: 60px;
            height: 40px;
            position: absolute;
            left: -20px;
            top: 6px;
        }
        .dirverName {
            font-size: 15px;
            width: 66px;
            text-align: center;
            position: absolute;
            z-index: 99;
            left: -23px;
            top: 6px;
        }
        .search-box {
            position: absolute;
            top: 20px;
            left: 80px;
        }
    }

</style>


<script>
    import {AMapManager} from "vue-amap";

    export default {
        props: {
            driverList: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            showSearch: {
                type: Boolean,
                default: true
            },
            mapHeight: {
                type: String,
                default: '600px'
            }
        },
        data() {
            return {
                randomNum: Math.floor(Math.random() * 1000000000000000 + 1),
                amapManager: new AMapManager(),
                zoom: 10,
                mapCenter: [116.397428, 39.90923],
                dirverMarkers: [],
                polylines: [],
                plugin: [
                    // {
                    // pName: 'ToolBar',
                    // // defaultType: 0,
                    // events: {
                    //     init(o) {
                    //         console.log(o);
                    //     }
                    // },
                // }
                ],
                searchOption: {
                    // city: '北京',
                    citylimit: true
                }
            };
        },
        watch: {
            driverList: {
                handler: function () {
                    this.addDr();
                },
                deep: true
            }
        },
        methods: {
            onSearchResult(pois) {
                let latSum = 0;
                let lngSum = 0;
                if (pois.length > 0) {
                    pois.forEach(poi => {
                        let {lng, lat} = poi;
                        lngSum += lng;
                        latSum += lat;
                        this.dirverMarkers.push({position:[poi.lng, poi.lat], type: 'driver', name: '王'});
                    });
                    let center = {
                        lng: lngSum / pois.length,
                        lat: latSum / pois.length
                    };
                    this.mapCenter = [center.lng, center.lat];
                }
            },
            addDr() {
                this.polylines = [];
                this.dirverMarkers = [];
                let line = [];
                this.driverList.localtion.forEach(item => {
                    let marker = {
                        position: [item.lon,item.lat],
                        name: this.driverList.driver,
                        type: 'driver'

                    };
                    line.push(marker.position)
                    this.dirverMarkers.push(marker);
                });

                let lines = {
                    path: line
                };
                this.mapCenter = this.driverList.localtion?[this.driverList.localtion[0].lon,this.driverList.localtion[0].lat]:[116.403322, 39.820255];
                this.polylines.push(lines)
            }
        }
    };
</script>
